<template>
	<view class="tabs">		
		<view class="tabs_item" :class="{'active_tabs': tabConfig.index == index }"	v-for="(item,index) in tabConfig.list" :key="item" @click="changeTabs(index)">
			<text class="name" :style="{color: tabConfig.index == index ? (tabConfig.activeColor || '#f00') : '',borderColor: tabConfig.index == index ? (tabConfig.activeBorderColor || '#f00') : ''}" >{{item}}</text>			
		</view>
	</view>
</template>

<script>
	import * as type from '../../utils/device'
	export default {
		props: {
			sendData: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				tabConfig: null,
			}
		},
		computed: {
			device(){
				return type.default;
			}
		},
		onLoad(options) {			
			
		},
		created(){
			this.init();
		},
		methods: {
			init(){	// 页面初始化
				const pages = getCurrentPages();
				const curPage = pages[pages.length - 1];
				this.tabConfig = this.device == 'MP-WEIXIN' ? curPage.data.tabConfig : this.$props.sendData;
			},
			changeTabs(i){					
				this.$emit('changeTabs',i);
			}
		}
	}
</script>

<style lang="scss" scoped>
.tabs{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	.tabs_item{
		flex: 1;
		font-size: 12px;
		text-align: center;
		color: #666;
		.name{
			padding: 10px 0;
		}
	}
	.active_tabs{
		.name{
			border-bottom: 2px solid;
			font-weight: bold;
		}
	}
}
</style>
